<template>
  <div class='container'>
    <!-- 最上 -->
    <div class="container-top">
      <div class="container-top-text">
        <div style="color: #606266;font-weight: 700;font-size: 14px;padding-left: 30px;">关键字</div>
        <el-input v-model="keyword"  style="width: 282px;margin:0 10px;" size="small" placeholder="根据编号搜索"></el-input>
        <div  style="margin-left: auto;">
          <el-button size="mini" @click="clearAway">清除</el-button>
          <el-button type="primary" size="mini" @click="searchWord">搜索</el-button>
        </div>
      </div>
    </div>
    <!-- 中间数量 -->
    <div class="container-con">
      <el-alert
         :title="`数据一共${total}条`"
         type="info"
         show-icon
         :closable="false"
         >
      </el-alert>
    </div>
    <!-- 下面主体 -->
    <div class="container-bottom">
      <!-- 表格 -->
      <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="id"
        label="编号"
        width="220">
      </el-table-column>
      <el-table-column
        prop="questionType"
        label="题型"
        width="80"
        >
        <template v-slot="{row}">
          <div v-if="row.questionType === '1'">单选</div>
          <div v-else-if="row.questionType === '2'">多选</div>
          <div v-else-if="row.questionType === '3'">简答</div>
        </template>
      </el-table-column>
      <el-table-column
        label="题目编号"
        width="220"
        >
        <template v-slot="{row}">
          <a @click="ToIdTmp(row)" v-for="(item,index) in row.questionIDs" :key="index" style="color: #0099ff;">{{item.number}}</a>
        </template>
      </el-table-column>
      <el-table-column
        prop="addTime"
        label="录入时间"
        width="180"
        >
      </el-table-column>
      <el-table-column
        prop="totalSeconds"
        label="答题时间(s)"
        width="220"
        >
      </el-table-column>
      <el-table-column
        prop="accuracyRate"
        label="正确率(%)"
        width="220"
        >
      </el-table-column>
      <el-table-column
        prop="userName"
        label="录入人"
        width="220"
        >
      </el-table-column>
      <el-table-column
        label="操作"
        width="80"
        >
        <template v-slot="{row}">
          <el-button @click="deleteWord(row)" type="danger" icon="el-icon-delete" circle style="color: #f56c6c;background: #fef0f0; border-color: #fbc4c4;"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页符 -->
    <el-pagination
      background
      :page-sizes="[20, 30, 40, 50]"
      layout="prev, pager, next,sizes,jumper"
      :total="total"
      style="text-align: right;margin-top: 20px;"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page"
      :page-size="pagesize"
      >
    </el-pagination>
    </div>
    <questionsPreviewVue :id="id" v-if="dialogVisible" :dialogVisible.sync="dialogVisible"/>
  </div>
</template>

<script>
// 导入封装的题组接口
import { randoms, removeRandoms } from '../../api/hmmm/questions'
import questionsPreviewVue from '../components/questions-preview.vue'
export default {
  data () {
    return {
      dialogVisible: false,
      id: null,
      tableData: [],
      // 当前页
      page: 1,
      // 每页条数
      pagesize: 20,
      // 数据总数
      total: null,
      // 关键字
      keyword: ''
    }
  },
  components: {
    questionsPreviewVue
  },
  created () {
    this.getRandomsList()
  },
  methods: {
    // 传id到组件
    ToIdTmp (row) {
      console.log(row)
      this.id = row.questionIDs[1].id
      this.dialogVisible = true
    },
    // 每页条数改变时触发
    handleSizeChange (e) {
      this.pagesize = e
      this.getRandomsList()
    },
    // 当前页改变时触发
    handleCurrentChange (e) {
      this.page = e
      this.getRandomsList()
    },
    // 封装获取题组列表接口
    async getRandomsList () {
      const data = await randoms({
        page: this.page,
        pagesize: this.pagesize
      })
      this.tableData = data.data.items
      this.total = data.data.counts
      console.log(this.tableData)
    },
    // 根据关键字搜索
    async searchWord () {
      const data = await randoms({
        page: this.page,
        pagesize: this.pagesize,
        keyword: this.keyword
      })
      this.tableData = data.data.items
      this.total = data.data.counts
    },
    // 点击清除搜索数据
    clearAway () {
      this.keyword = ''
    },
    // 点击删除
    deleteWord (row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await removeRandoms(row)
        this.getRandomsList()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>

<style scoped lang='scss'>
.container {
  padding: 20px;
  .container-top {
    padding: 20px;
    background-color: #fff;
    .container-top-text {
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
  }
  .container-con {
    padding: 0px 20px;
    background-color: #fff;
  }
  .container-bottom {
    padding: 20px;
    background-color: #fff;
  }
}
</style>
